<template>
	<view>
		<!-- 背景图放在最顶层，navbar 透明覆在其上 -->
		<image src="/static/icon_bj2.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill"></image>
		<u-navbar title="个人信息" :autoBack="false" leftIcon=" " bgColor="transparent" :titleStyle="{ color: '#fff' }"
			safeAreaInsetTop placeholder></u-navbar>
		<view class="h-200 relative zi-2 rowsb rowsm pl-34 pr-34 pt-34 pb-34">
			<view class="rows f-7" @tap="goUserInfo()">
				<image :src='userInfo.avatar' mode="aspectFill" class="w-116 h-116 br-58"></image>
				<view class="rowsbl pl-22 h-112 fs-30 pt-8 pb-8">
					<view class="fs-36 fw-b colfff">{{ userInfo.userName || '未登录' }}</view>
					<view class="fs-26 colfff">{{ userInfo.phonenumber }}</view>
				</view>
			</view>
		</view>
		<view class="w-710 mgt bgff pl-32 pr-32 br-20 shadow">
			<view class="rowsl">
				<view class="pt-32 pb-32 rowsc rowsm bor" v-for="(item, index) in functionList" :key="index"
					@tap="handleFunctionClick(item.onClick)">
					<image class="w-52 h-52 mr-20" :src="item.icon" />
					<view class="f-1 fw-400 fs-28">{{ item.label }}</view>
					<u-icon name="arrow-right" size="18" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view @tap="submit()" class="w-690 h-88 br-16 fixed rowsc rowsm fs-36 colfff bg"
			style="bottom: 168rpx;left: 30rpx;">
			切换账号
		</view>
		<CustomTabbar :currentTab="tabName" />
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
import { logout } from '@/api/login'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			tabName: 'mine',
			navbarHeight: 438,
			userInfo: {
			},
			functionList: [
				{ label: '意见反馈', icon: '/static/yj.png', onClick: 'goFeedback' },
				{ label: '平台客服', icon: '/static/icon_kf.png', onClick: 'goCustomerService' },
				{ label: '问题答疑', icon: '/static/icon_wen.png', onClick: 'goQuestionAnswer' },
			],
		}
	},
	onLoad() {
		this.getUserInfo();
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		goUserInfo() {
			uni.navigateTo({
				url: '/pages/mine/userinfo'
			})
		},
		handleFunctionClick(onClick) {
			if (onClick === 'goFeedback') {
				this.$tab.navigateTo(`/pages/mine/feedback`)
			} else if (onClick === 'goCustomerService') {
				this.$tab.navigateTo(`/pages/mine/customerService`)
			} else if (onClick === 'goQuestionAnswer') {
				this.$tab.navigateTo(`/pages/mine/questionAnswer`)
			}
		},
		getUserInfo() {
			this.$store.dispatch('GetInfo').then(res => {
				console.log('获取用户信息成功，返回数据:', res)
				this.userInfo = res.user
			}).catch(error => {
				console.log('获取用户信息失败，错误信息:', error)
			})
		},
		async submit() {
			try {
				// 显示确认对话框
				const res = await uni.showModal({
					title: '提示',
					content: '确定要切换账号吗？',
					confirmText: '确定',
					cancelText: '取消'
				})
				console.log(res)
				// uni.showModal 返回的是数组 [err, res]，需要取第二个元素
				const modalRes = res[1]
				if (modalRes && modalRes.confirm) {
					// 显示加载状态
					uni.showLoading({
						title: '退出中...'
					})
					
					// 调用退出接口
					await logout()
					
					// 清除本地存储的用户信息
					uni.removeStorageSync('App-Token')
					uni.removeStorageSync('userInfo')
					
					// 隐藏加载状态
					uni.hideLoading()
					
					// 跳转到登录页面
					uni.reLaunch({
						url: '/pages/login'
					})
					
					uni.showToast({
						title: '已退出登录',
						icon: 'success'
					})
				} else if (modalRes && modalRes.cancel) {
					console.log('用户取消了切换账号')
					uni.showToast({
						title: '已取消',
						icon: 'none'
					})
				}
			} catch (error) {
				// 隐藏加载状态
				uni.hideLoading()
				
				console.error('退出登录失败:', error)
				
				// 即使接口调用失败，也清除本地数据并跳转
				uni.removeStorageSync('App-Token')
				uni.removeStorageSync('userInfo')
				
				uni.reLaunch({
					url: '/pages/login'
				})
				
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	z-index: -1;
}
</style>
